<!doctype html>
<html lang="zh-cn" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="renderer" content="webkit" />
    <title></title>
    <link rel="stylesheet" href="css/pintuer.css" />
    <link rel="stylesheet" href="css/admin.css" />
    <script src="js/jquery.js"></script>
    <script src="js/pintuer.js"></script>
    <script src="/js/vuejs-2.5.16.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
    <script src="/js/laydate/laydate.js"></script>
  </head>
  <body>
    <div class="panel admin-panel" id="moviesDiv">
      <div class="panel-head" id="add">
        <strong><span class="icon-pencil-square-o"></span>增加影视内容</strong>
      </div>
      <div class="body-content">
        <form method="post" class="form-x">
          <input type="hidden" name="id" v-model="movies.id" />
          <div class="form-group">
            <div class="label">
              <label>影视标题：</label>
            </div>
            <div class="field">
              <input
                type="text"
                class="input w50"
                v-model="movies.title"
                name="title"
              />
              <div class="tips"></div>
            </div>
          </div>

          <div class="form-group">
            <div class="label">
              <label>导演：</label>
            </div>
            <div class="field">
              <input
                type="text"
                class="input w50"
                v-model="movies.director"
                name="director"
              />
              <div class="tips"></div>
            </div>
          </div>

          <div class="form-group">
            <div class="label">
              <label>主要演员：</label>
            </div>
            <div class="field">
              <input
                type="text"
                class="input w50"
                v-model="movies.actors"
                name="actors"
              />
              <div class="tips"></div>
            </div>
          </div>

          <div class="form-group">
            <div class="label">
              <label>播放链接：</label>
            </div>
            <div class="field">
              <input
                type="text"
                class="input w50"
                v-model="movies.url"
                name="url"
              />
              <div class="tips"></div>
            </div>
          </div>

          <div class="form-group">
            <div class="label">
              <label>影视图片：</label>
            </div>
            <div class="field">
              <input
                type="file"
                id="url1"
                name="picPath"
                class="input tips"
                style="width: 25%; float: left"
                data-toggle="hover"
                data-place="right"
                @change="uploadFile()"
              />
              <div class="tipss">图片尺寸：1300*500</div>
            </div>
          </div>

          <div class="form-group" v-if="movies.picPath">
            <div class="label">
              <label>原图片：</label>
            </div>
            <div class="field">
              <img
                v-bind:src="movies.picPath"
                alt=""
                width="300"
                height="100"
              />
            </div>
          </div>
          <div class="clear"></div>

          <div class="form-group">
            <div class="label">
              <label>影视分类标题：</label>
            </div>
            <div class="field">
              <select name="cid" class="input w50" v-model="movies.cid">
                <option value="">请选择分类</option>
                <option
                  :value="item.id"
                  v-for="item in categoryList"
                  :key="item.id"
                >
                  {{item.categoryName}}
                </option>
              </select>
              <div class="tips"></div>
            </div>
          </div>

          <div class="form-group">
            <div class="label">
              <label>影视描述：</label>
            </div>
            <div class="field">
              <textarea
                class="input"
                style="height: 250px; border: 1px solid #ddd"
                v-model="movies.contentDesc"
                name="contentDesc"
              ></textarea>
              <div class="tips"></div>
            </div>
          </div>

          <div class="clear"></div>

          <div class="form-group">
            <div class="label">
              <label>影视关键字：</label>
            </div>
            <div class="field">
              <input
                type="text"
                class="input"
                v-model="movies.keyword"
                name="keyword"
              />
            </div>
          </div>

          <div class="form-group">
            <div class="label">
              <label>排序：</label>
            </div>
            <div class="field">
              <input
                type="number"
                class="input w50"
                v-model="movies.orderNo"
                name="orderNo"
              />
              <div class="tips"></div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>上映时间：</label>
            </div>
            <div class="field">
              <input
                type="date"
                class="input w50"
                v-model="movies.showTime"
                name="showTime"
              />
            </div>
          </div>

          <div class="form-group">
            <div class="label">
              <label></label>
            </div>
            <div class="field">
              <a
                class="button bg-main icon-check-square-o"
                href="javascript:void(0)"
                @click="saveOrUpdate()"
              >
                提交</a
              >
            </div>
          </div>
        </form>
      </div>
    </div>
    <script type="text/javascript">
      const app = new Vue({
        el: "#moviesDiv",
        data: {
          movies: {},
          categoryList: [],
        },
        methods: {
          //图片上传
          uploadFile() {
            let formData = new window.FormData();
            formData.append(
              "uploadFile",
              document.querySelector("input[type=file]").files[0],
            );
            let options = {
              // 设置axios的参数
              url: "/file/upload", //访问地址
              data: formData,
              method: "post",
              headers: {
                "Content-Type": "multipart/form-data",
              },
            };
            axios(options).then((resp) => {
              if (resp.data.code == 1) {
                this.movies.picPath = resp.data.data; //将图片访问地址记录到movies对象
              } else {
                alert(resp.data.msg);
              }
            });
          },
          getCategory() {
            axios.get("/category/list").then((resp) => {
              if ((resp.data.code = 1)) {
                this.categoryList = resp.data.data.list;
              } else {
                alert(resp.data.msg);
              }
            });
          },
          saveOrUpdate() {
            //发送ajax的post请求,保存影视
            axios.post("/movies/saveOrUpdate", this.movies).then((resp) => {
              if (1 == resp.data.code) {
                //清空表单中的数据
                this.movies = {};
                //重定向到影视列表页面
                location.href = "movies_list.html";
              } else {
                alert(resp.data.msg);
              }
            });
          },
          findById(id) {
            axios.get("/movies/findById?id=" + id).then((resp) => {
              if (resp.data.code == 1) {
                this.movies = resp.data.data;
              } else {
                alert(resp.data.msg);
              }
            });
          },
        },
        created() {
          this.getCategory();
          //1.获取影视的id值
          let id = location.search.split("=")[1];
          //2.发送ajax请求查询影视信息
          if (id) {
            this.findById(id);
          }
        },
      });
    </script>

    <script>
      lay("#version").html("-v" + laydate.v);
      //执行一个laydate实例
      laydate.render({
        elem: "#showTime", //指定元素
      });
    </script>
    <script src="/js/verify.js"></script>
  </body>
</html>
